import React, { PureComponent } from 'react'
import { Button } from "antd";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import DoubleCheck from "@common/presentational/DoubleCheck";
import {
    getAlipayAccountList,
    alipayAuthorize,
    alipayApplyDetail,
    deleteAlipayAccount
} from "@sagas/payment";
import ChangeAlipayNameModal from "@components/payment/modal/ChangeAlipayNameModal";
import AlipayProcessModal from "@components/payment/modal/AlipayProcessModal";
import getUrlParams from "@utils/getUrlParams";
import { PAYMENT_ALIPAY_STATUS } from '@constants/PaymentStatus'
import BilinIcon from "@common/presentational/BilinIcon";
@connect(({ payment }) => ({
    rechargeAlipayAccount: payment.rechargeAlipayAccount,
}), {
    getAlipayAccountList,
    alipayAuthorize,
    alipayApplyDetail,
    deleteAlipayAccount
})
@withRouter
class PaymentAlipayPage extends PureComponent {
    constructor(props) {
        super(props);
        this.getTableInfo = this.getTableInfo.bind(this)

        this.changeNameModalRef = React.createRef()
        this.processModalRef = React.createRef()
        let redirectUrl = `${window.location.origin}/payment/alipay`
        this.state = {
            authUrl: `https://openauth.alipay.com/oauth2/appToAppAuth.htm?app_id=2021002146610441&application_type=PUBLICAPP&redirect_uri=${redirectUrl}`,
        }
    }

    componentDidMount () {
        this.getTableInfo()
        const { location, history } = this.props
        let appAuthCode = getUrlParams(location.search || '', 'app_auth_code')
        let appId = getUrlParams(location.search || '', 'app_id')
        if (appAuthCode) {
            this.props.alipayAuthorize({
                appAuthCode,
                appId
            }, () => {
                this.getTableInfo()
            })
        }
        history.replace({
            path: history.location.pathname,
            state: {}
        })
    }

    changeName(item) {
        this.changeNameModalRef.current?.show({
            name: item.name,
            id: item.id
        })
    }

    deleteAccount(item) {
        const { deleteAlipayAccount } = this.props
        deleteAlipayAccount({
             id: item.id
         },res=>{
             this.getTableInfo()
         })
    }

    showProcess(item) {
        const { alipayApplyDetail } = this.props
        alipayApplyDetail({
             id: item.id
         },res=>{
             this.processModalRef.current?.show({
                ...res.query_result,
                ...res.account_info
            })
         })
    }

    getTableInfo() {
        this.props.getAlipayAccountList({
            pageNo: 1,
            pageSize: 10
        })
    }

    goModifyPage(item) {
        const { alipayApplyDetail, history } = this.props
        alipayApplyDetail({
             id: item.id
         },res=>{
            history.push({
                pathname: `/payment/alipay/create/${item.id}`,
                state: {
                    ...res.query_result
                }
            })
         })
    }

    goCreatePage(item) {
        const { history } = this.props
        history.push(`/payment/alipay/create/${item.id}`)
    }

    render() {
        const { rechargeAlipayAccount } = this.props
        const { authUrl } = this.state
        return (
            <div className="payment-page">
                <div className="flex-vertical-center">
                    { authUrl ? (
                    <div className="step-operation">
                        <a type="primary" href={authUrl} target="_self">
                            <Button type="primary" className="button-small mgb-24"><BilinIcon type="plus" className="ft-18 mgr-8"/>新建</Button>
                        </a>
                    </div>
                ) : null }
                </div>
                {(rechargeAlipayAccount.accounts || []).map(item => {
                    return (<div key={item.id} className='mgb-24 flex-row-between customer-table-line'>
                        <div className='line-left'>
                            <div>
                                <span className="ft-16 ft-clr-d">{item.name}</span>
                                <span className={"ft-12 ft-clr-ml mgl-12 status status-alipay-" + `${item.status}`}>{PAYMENT_ALIPAY_STATUS[item.status]}</span>
                            </div>
                            <div className="mgt-12">
                                <span className="ft-14 ft-clr-ml mgr-48">AppID:{item.app_id}</span>
                                {item.p_id && <span className="ft-14 ft-clr-ml mgr-48">支付宝PID:{item.p_id}</span>}
                            </div>
                        </div>
                        <div className="flex">
                           { item.status === 0 || item.status === 1 ? <div onClick={this.goCreatePage.bind(this,item)} className="mgr-8 ft-hover">立即开通</div> : null}
                           { item.status !==2 && item.status !==0 && item.status !== 1 ? <div onClick={this.goModifyPage.bind(this,item)} className="mgr-8 ft-hover">重新提交</div> : null}
                            <div onClick={this.changeName.bind(this, item)} className="mgr-8 ft-hover">修改别名</div>
                           { item.status ===2 || item.status ===4 || item.status ===5 ? <div onClick={this.showProcess.bind(this,item)} className="mgr-8 ft-hover">查看进度</div> : null}
                            <DoubleCheck onClick={this.deleteAccount.bind(this, item)}>
                                <div className="mgr-8 ft-hover">删除</div>
                            </DoubleCheck>
                        </div>
                    </div>)
                })}
                <ChangeAlipayNameModal callback={this.getTableInfo} ref={this.changeNameModalRef} />
                <AlipayProcessModal ref={this.processModalRef} />
            </div>
        )
    }
}

export default PaymentAlipayPage